<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="/Public/layui/dist/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/Public/BeginnerAdmin/css/global.css" media="all">
    <link rel="stylesheet" href="/Public/BeginnerAdmin/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/Public/BeginnerAdmin/css/table.css"/>
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <a href="javascript:;" class="layui-btn layui-btn-small" id="add">
            <i class="layui-icon">&#xe608;</i> 添加信息
        </a>
    </blockquote>
    <form class="layui-form"  action="">

        <div class="layui-form-item" style="margin-left:-30px;">
            <div class="layui-inline">
                <label class="layui-form-label">开始日期</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="datetime" id="start_date" lay-verify="datetime" placeholder="yyyy-mm-dd H:i:s"
                           value="{$row.datetime}"   autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-mid">结束日期</div>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="datetime" id="end_date" lay-verify="datetime" placeholder="yyyy-mm-dd H:i:s"
                           value="{$row.datetime}"   autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-mid">选择类型</div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="type">
                        <option value="0">写作</option>
                        <option value="1">阅读</option>
                        <option value="2">游戏</option>
                        <option value="3">音乐</option>
                        <option value="4">旅行</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item" style="margin-left:-30px;">
            <div class="layui-inline">
                <label class="layui-form-label">模糊搜索</label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text"  placeholder="标题、关键描述、id" autocomplete="off" class="layui-input" >
                </div>
                <!--block 元素直接写-->
                <button class="layui-btn" lay-submit="" lay-filter="demo1" id="submit">搜索</button>
            </div>
        </div>

        <fieldset class="layui-elem-field">
            <legend>数据列表</legend>
            <div class="layui-field-box layui-form">
                <table class="layui-table admin-table" width="100%" lay-even lay-skin="line" lay-size="sm" id="table">
                    <thead>
                    <tr>
                        <th align="center" width="5%"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
                        <th align="center" width="5%">ID</th>
                        <th align="center" width="10%">昵称</th>
                        <th align="center" width="10%">账号</th>
                        <th align="center" width="10%">手机</th>
                        <th align="center" width="10%">邮箱</th>
                        <th align="center" width="10%">生日</th>
                        <th align="center" width="15%">头像</th>
                        <th align="center" width="10%">部门</th>
                        <th align="center" width="15%">操作</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    <volist name="data.data" id="v" key="key">
                        <tr>
                            <td><input type="checkbox" lay-skin="primary"></td>
                            <td>{$v.id}</td>
                            <td>{$v.name}</td>
                            <td>{$v.account}</td>
                            <td>{$v.phone}</td>
                            <td>{$v.email}</td>
                            <td>{$v.birth}</td>
                            <td>
                                <img src="{$v.avatar}" width="60px" layer-src="{$v.avatar}" alt="东歌灬"/>
                            </td>
                            <td>{$v.role_id}</td>
                            <td>
                                <a href="/detail-1" target="_blank"
                                   class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
                                <a href="javascript:;" data-id="{$v.id}" data-opt="edit"
                                   class="layui-btn layui-btn-mini edit-btn">编辑</a>
                                <a href="javascript:;" data-id="{$v.id}" data-opt="del"
                                   class="layui-btn layui-btn-danger layui-btn-mini del-btn">删除</a>
                            </td>
                        </tr>
                    </volist>
                    </tbody>
                </table>

                <!--后端分页-->
                <div id="paged" class="page">
                    <include file="./Application/Common/View/page.html"/>
                </div>
                <!--点击跳转-->
                <input name="page" value="{$pageData.pageInfo.page}" id="pageInput" type="hidden"/>
            </div>
        </fieldset>
    </form>


</div>

<script type="text/javascript" src="/Public/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Public/jquery/jquery.form.js"></script>
<script src="/Public/layui/dist/layui.all.js"></script>
<script>
    function ajaxCall() {
        window.location.href = window.location.href;
    }

</script>
<script>
    layui.use([ 'form','laydate'], function () {
        var $ = layui.jquery,
            layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
            layer = layui.layer, //获取当前窗口的layer对象
            laydate = layui.laydate,
            form = layui.form;

        laydate.render({
            elem: '#start_date', //指定元素
            type: 'datetime'
        });
        laydate.render({
            elem: '#end_date', //指定元素
            type: 'datetime'
        });
    });

    layui.use('layer', function () {
        var $ = layui.jquery,
            layer = layui.layer;

        layer.photos({
            photos: '#table'
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });

        //新增
        $('#add').on('click', function () {
            layer.open({
                title: '新增',
                maxmin: true,
                shadeClose: true,
                type: 2,
                content: '/home/user/add',
                area: ['90%', '100%']
            });
        });
        //编辑
        $('.edit-btn').on('click', function () {
            var id = $(this).data('id');
            layer.open({
                title: '编辑',
                maxmin: true,
                shadeClose: true,
                type: 2,
                content: '/home/user/edit?id=' + id,
                area: ['90%', '100%']
            });
        });
        //删除
        $('.del-btn').on('click', function () {
            var id = $(this).data('id');
            layer.confirm('您确定要删除该条数据？', {
                btn: ['是', '否'] //按钮
            }, function () {
                $.ajax({
                    url: '/home/user/del_callback',
                    type: 'POST',
                    data: {id: id},
                    async: false,
                    cache: false,
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        lhgdialog.alert('网络错误,请稍后再试!');
                    },
                    success: function (data, textStatus, jqXHR) {
                        var error = data.error_code;
                        var msg = data.msg;
                        if (!msg) {
                            msg = '网络异常,请稍候再试!';
                        }
                        if (error != '0') {
                            layer.alert(msg, {icon: 2});
                            return;
                        }
                        if (error == 0) {
                            layer.msg(msg, {icon: 1}, function () {
                                ajaxCall();
                            });
                            return;
                        }
                    }
                });

            }, function () {

            });
        });


    });
</script>
</body>

</html>